<template>
  <view class="coursesLearned">
    <coursesLearned :courses="courses"></coursesLearned>
  </view>
</template>

<script>
import coursesLearned from "../../../components/homeIndex/coursesLearned.vue";
import {getCoursesLearnedList} from "../../../api/new";
import {
  mapGetters
} from "vuex";
export default {
  name: "index",
  components:{
    coursesLearned
  },
  data(){
    return{
      courses:[],
      propagation:{
        limit:10,
        page:1,
      }
    }
  },
  computed: mapGetters(['isLogin']),
  onReachBottom(){
    if (this.isLogin) {
      this.getList()
    }
  },
  onShow: function () {
    if (this.isLogin) {
      this.getList()
    }
  },
  methods:{
    getList(){
      getCoursesLearnedList(this.propagation).then(res=>{
        if (this.propagation.page === 1) {
          this.courses=res.data.list
        } else {
          this.courses = [...this.courses, ...res.data.list];
        }
        this.propagation.page=res.data.page+1
      })
    }
  }
}
</script>

<style scoped lang="scss">
.coursesLearned{
  padding: 15px;
}
</style>